<template>
  <div class="resource-view">

    <div class="header">
      <h2>教学资源</h2>
    </div>

    <div class="header-select" v-if="false">
      <el-select v-model="selectedCategory" placeholder="按分类筛选" clearable @change="filterResources">
        <el-option label="文档" value="DOCUMENT"></el-option>
        <el-option label="视频" value="VIDEO"></el-option>
        <el-option label="音频" value="AUDIO"></el-option>
        <el-option label="图片" value="IMAGE"></el-option>
      </el-select>
    </div>

    <Waterfall :items="resources" @item-click="viewResourceDetail" />

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useResourceStore, Resource } from '@/stores/api/resource';
import { ElMessage } from 'element-plus';
import Waterfall from '@/components/layout/Waterfall.vue';

const resourceStore = useResourceStore();
const router = useRouter();

const resources = ref<Resource[]>([]);
const selectedCategory = ref('');

const filterResources = async () => {
  try {
    if (selectedCategory.value) {
      resources.value = await resourceStore.fetchResourcesByCategory(selectedCategory.value);
    } else {
      resources.value = await resourceStore.fetchResources();
    }
  } catch (error) {
    ElMessage.error('获取资源列表失败');
  }
};

const viewResourceDetail = (resource: Resource) => {
  router.push(`/front/resource/${resource.id}`);
};

onMounted(() => {
  filterResources();
});
</script>

<style scoped>
.resource-view {
  width: 80%;
  margin: 40px auto 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header h2 {
  font-size: 24px;
  color: #333;
  flex-grow: 1;
  text-align: center;
}

</style>